<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的基本使用</title>
</head>
<body>

<!--初始化一个容器-->
<div id="app">
    <h2>这是第二个div</h2>
</div>

<div class="app">
    <h2>这是第一个div</h2>
</div>

<!--引入vue.js文件-->
<script src="../vue.js"></script>
<script>
    /**
     *  1. 创建vue的实例对象  使用vue就是从创建一个vue实例对象开始的
     *  2. 通过template属性  设置需要渲染到容器中的模板
     *  3. 使用template完成容器中内容的渲染时   会覆盖容器中原来的内容
     *  4. vue实例只能绑定一个容器
     *  5. $mount('.app') 实现实例和容器绑定时 既可以使用id选择器 也可以使用class选择器   #app 推荐  .app
     */

    const vm =  new  Vue({
        template:'<p id="p1">hello vue</p>'
    })

    //2. 给vue实例绑定渲染的目标位置  容器
     vm.$mount('#app')
    //  vm.$mount(document.getElementById("app"))
</script>

</body>
</html>